<template>
	<view class='header'>
		<view>预约场馆</view>
		<view class="addSelect">
			<view>
				<view class="iconfont icon-dingwei"></view>
				<picker @change="bindPickerChange" :range="myvenues" :value="index">
					<view>
						<view>{{myvenues[index]}}</view>
					</view>
				</picker>
			</view>
			<text class="iconfont icon-jiantouxia "></text>
		</view>
	</view>
	<view class='body'>
		<view>可预约课程</view>
		<view>
			<view class='mysijiao' v-for='(v,i) in mypicture'>
				<image :src="v.courseImg" @click="details(i)"></image>
				<view class="mytext">
					<view>{{v.courseName}}</view>
					<view>{{v.courseCoach}}</view>
					<view class='mymoney'>
						<view>￥{{v.classmoney}}<text>/起</text></view>
						<text @click="details(i)">{{v.type}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import myRequest from '../../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				mypicture: [],
				index: 0,
				myvenues: [],
				bindPickerChange(e) {
					this.index = e.detail.value
				},
				details(n) {
					console.log(this.mypicture[n])
					uni.navigateTo({
						url: `/pages/Appointment/PersonlManag/PersonalDetails?data=` + encodeURIComponent(
							JSON.stringify(this.mypicture[n])),
					})
				},
				//初始化 获取场馆的数据
				venuesInit() {
					myRequest({
						url: '/Callgetvenues',
					}).then((res1) => {
						let venues = res1.data.data
						venues.forEach((x, index) => {
							data.myvenues.push(x.venuesAddress)
						})
					})
				},
				//初始化 获取可预约课程数据
				init() {
					myRequest({
						url: '/courselist',
					}).then((res1) => {
						let mydata = res1.data.data
						this.mypicture = mydata.filter(function(x, index) {
							return x.classify === 2
						});
						return myRequest({
							url: '/getcoach',
						}).then((res2) => {
							let data2 = res2.data.data
							for (let i = 0; i < this.mypicture.length; i++) {
								for (let j = 0; j < data2.length; j++)
									if (this.mypicture[i].courseCoach == data2[j].coachId) {
										this.mypicture[i].courseCoach = data2[j].coachName;
									}
								if (this.mypicture[i].allowAppoint < 10) {
									this.mypicture[i].type = '详情'
								} else {
									this.mypicture[i].type = '满员'
								}
							}
						})
					})
				}
			});
			onLoad((a) => {
				data.init()
				data.venuesInit()
			})
			return data
		}
	}
</script>
<style lang="scss">
	@import url('~@/static/font-li/font2022/iconfont.css');

	.header {
		height: 200rpx;
	}

	.body>view:first-child,
	.header view:first-child {
		font-size: 40rpx;
		font-weight: 600;
	}

	.header,
	.body {
		margin: 0 20rpx;
	}

	.body>view:nth-of-type(2) {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap
	}

	.mysijiao {
		margin-top: 20rpx;
		width: 340rpx;
		box-shadow: 4px 4px 5px 3px rgba(0, 0, 0, 0.2);
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;

		image {
			display: block;
			width: 340rpx;
			height: 250rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
		}

		;

		.mytext {
			padding: 20rpx 10rpx;
			font-size: 30rpx;
			font-weight: 500;

			view:first-child {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			;

			view:nth-of-type(2) {
				color: gray;
				margin: 8rpx auto;
			}

			;

			.mymoney {
				display: flex;
				justify-content: space-between;

				view {
					font-size: 35rpx;
					font-weight: 700;
					color: blue;

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: gray;
						background-color: white;
					}
				}

				text {
					background-color: orange;
					color: white;
					width: 80rpx;
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
				}
			}

		}
	}

	;

	.addSelect {
		margin-top: 15rpx;
	
	}
	
	.addSelect {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.addSelect view:first-child {
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}
</style>
